<script setup> 
import buttonVue from '../button/button.vue';
import { ref, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import qs from 'qs'
import { ElMessageBox } from 'element-plus'
import axios from 'axios';
import jwt_decode from "jwt-decode";

const router = useRouter();
const input = ref('')

const header= ref('提现')

var moneyPatten = /^[1-9]\d{0,8}$/

const isMoneyTrue = ref(true)

function determine() {
    isMoneyTrue.value = moneyPatten.test(money.value)
}

const userNumber = ref('U10000000001') //用户账号


const money = ref('') //输入的充值金额

const value1 = ref('') //下拉框的银行卡账号
let token = jwt_decode(localStorage.getItem("token"))
    if (token == null) {
        token = jwt_decode(localStorage.getItem("longToken"))
    }
//从后端数据库中请求的类型数据对应的卡类型
let cards1 = ref()//储蓄卡的数组
//初始化的时候就渲染好类别和卡号
onMounted(() => {
    axios.post("http://192.168.110.221:8080/user/queryBindAccountNoCredListController", 
        qs.stringify ({
            token: localStorage.getItem("token"),
            longToken: localStorage.getItem("longToken"),
            userId: token.userId,
            userNumber: token.userNumber,
        }
    )).then((resp) => {
        if(resp.data.code == 200){
            cards1.value = resp.data.datas
            // console.log(resp.data.datas[0].accountNumber);
            // console.log(cards1.value[0].accountNumber);
        }else if(resp.data.datas == 500){
            open("服务器内部错误")
        }
    }).catch((e) => {
        // catch中获取到的值是请求失败或者代码问题造成的错误，而因代码造成的错误在.then()中获取不到，因此我们常用catch
        // 我们偶尔会遇到一些问题：明明请求成功了，逻辑却进入catch中了，这时说明在then中的处理逻辑可能出现了错误，并不是请求失败才会进入catch
        //跳转到404页面
        router.push('/')
    })
})
function open(errormsg) {
    ElMessageBox.alert(errormsg, '验证失败!', {
        confirmButtonText: '确认',
    })
}
function select() {
    if(money.value == ""){
        open("请输入金额")
    }else{
        if (isMoneyTrue.value) {
                sessionStorage.setItem('userNumber', userNumber.value),//用户账号
                sessionStorage.setItem('amount', money.value),//输入金额
                sessionStorage.setItem('accountNumber', value1.value),//选择的银行卡账号
                sessionStorage.setItem('header',header.value)//当下的表头
                //弹出一个输入密码组件
                router.push('/payment-password')
        }else{
            money.value == "" 
        }
    }
}
</script>

<template>
    <div class="container">
    <div class="box">
        <h1 class="title">选择提现的银行卡</h1>
        <p class="card">
            <span class="iconfont">&#xe68a;</span>
            <el-select v-model="value1" filterable placeholder="选择充值的银行卡账号" class="value1-style">
                <el-option v-for="item in cards1" :key="item.value" :label="item.accountNumber"
                    :value="item.accountNumber"  style="text-align: center;"/>
            </el-select>
        </p>
        <input type="text" placeholder="输入提现金额" v-model=money @blur="determine()">
        <p class="p1" v-if="!isMoneyTrue">提现金额框只能输入数字且不为空</p>
        <button-vue btn-color="#1058f3" btn-name="提现" @click="select"></button-vue>
    </div></div>
</template>

<style scoped>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.container{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.value1-style{
    width: 65%;
    height: 20px;
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 40px;
    font-style: normal;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    color: #0953f3;
    margin-right: 20px;
    vertical-align: top;
}
.box{
    margin: 0px auto 0;
    text-align: center;
    width: 100%;
    background-color: #fff;
    padding: 10px 0;
}
.title{
    font-size: 14px;
    margin: 10px 0;
}
.card{
    margin: 10px;
    font-size: 20px;
}
input{
    width: 80%;
    font-size: 18px;
    outline: none;
    padding: 10px 0;
    border: transparent;
    border-bottom: 1px solid lightgray;
    margin: 10px 0 10px;
}
.p1{
    width: 260px;
    margin: 0 auto;
    color: red;
    font-size: 14px;
    text-align: left;
    text-indent: 10px;
    margin-top: 10px;
}
</style>